<template>
  <div class="home">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12" :md="6" class="home__col">
        <CommonCard title="今日销售额" :value="homeData.salesToday">
          <div>
            日同比 {{ homeData.salesGrowthLastDay }}%<el-icon color="red"
              ><CaretBottom
            /></el-icon>
          </div>
          <div>
            月同比 {{ homeData.salesGrowthLastMonth }}%<el-icon color="green"
              ><CaretTop
            /></el-icon>
          </div>
          <template #footer>
            <div>
              昨日销售额 ¥ <b>{{ homeData.salesLastDay }}</b>
            </div>
          </template>
        </CommonCard>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" class="home__col">
        <CommonCard title="今日订单" :value="homeData.orderToday">
          <LineChart
            :data="homeData.orderTrend"
            :axis="homeData.orderTrendAxis"
          />
          <template #footer>
            <div>
              昨日订单量 ¥ <b>{{ homeData.orderLastDay }}</b>
            </div>
          </template>
        </CommonCard>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" class="home__col">
        <CommonCard title="今日交易用户数" :value="homeData.orderUser">
          <BarChart
            :data="homeData.orderUserTrend"
            :axis="homeData.orderUserTrendAxis"
          />
          <template #footer>
            <div>
              退货率 <b>{{ homeData.returnRate }}</b
              >%
            </div>
          </template>
        </CommonCard>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" class="home__col">
        <CommonCard title="累计用户数" :value="homeData.usersTotal">
          <ProgressChart :data="homeData.usersLastMonth" />
          <template #footer>
            <div>
              日同比 {{ homeData.userGrowthLastDay }}%<el-icon color="green"
                ><CaretTop
              /></el-icon>
              月同比 {{ homeData.userGrowthLastMonth }}%<el-icon color="red"
                ><CaretBottom
              /></el-icon>
            </div>
          </template>
        </CommonCard>
      </el-col>
    </el-row>
    <!-- 销售额访问量 -->
    <SalesVisited
      :orderFullYearAxis="homeData.orderFullYearAxis"
      :orderFullYear="homeData.orderFullYear"
      :userFullYearAxis="homeData.userFullYearAxis"
      :userFullYear="homeData.userFullYear"
    />
    <!-- 分类销售排行 -->
    <CategoryRank
      :category="homeData.saleRank.category"
      :goods="homeData.saleRank.goods"
    />

    <!-- 百度地图 -->
    <BMap />
  </div>
</template>

<script lang="ts">
export default {
  name: "XHome",
};
</script>
<script lang="ts" setup>
import CommonCard from "./components/CommonCard.vue";
import LineChart from "./components/LineChart.vue";
import BarChart from "./components/BarChart.vue";
import ProgressChart from "./components/ProgressChart.vue";
import SalesVisited from "./components/SalesVisited.vue";
import CategoryRank from "./components/CategoryRank.vue";
import BMap from "./components/BMap.vue";
import { CaretBottom, CaretTop } from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";
import { getHomeDataApi } from "@/api/home";
const homeData = ref<any>({
  // "//1": "今日销售额",
  salesToday: 0,
  salesLastDay: 0,
  salesGrowthLastDay: 0,
  salesGrowthLastMonth: 0,

  // "//2": "今日订单量",
  orderToday: 0,
  orderLastDay: 0,
  orderTrend: [],
  orderTrendAxis: [],

  // "//3": "今日交易用户数",
  orderUser: 0,
  returnRate: 0,
  orderUserTrend: [],
  orderUserTrendAxis: [],

  // "//4": "累计用户数",
  usersTotal: 0,
  usersLastMonth: 0,
  userGrowthLastDay: 0,
  userGrowthLastMonth: 0,

  // "//5": "销售额与访问量",
  orderFullYearAxis: [],
  orderFullYear: [],
  userFullYearAxis: [],
  userFullYear: [],

  // "//8": "分类销售排行",
  saleRank: {
    category: {
      axisX: [],
      data1: [],
    },
    goods: {
      axisX: [],
      data1: [],
    },
  },
});
onMounted(async () => {
  homeData.value = await getHomeDataApi();
});
</script>

<style scoped>
.home__col {
  margin-top: 10px;
}
</style>
